<template>
  <div>
    <!-- 主要页面最大的 -->
    <div class="pa">
      <!-- 头像和信息 -->
      <div class="up-demo">
        <div id="avatar">
          <el-image
            style="width: 125px; height: 125px; border-radius: 7px"
            :src="url"
          ></el-image>
        </div>
        <div id="info">
          <div>
            <div class="info-username">{{ user.name }}
              <span class="user_describe">{{userInfo.user_describe!=null?userInfo.user_describe:''}}</span>
            </div>
            <div class="details">
              <div class="details-one">
                <span class="detailsname">性别</span>
                <span class="detailscontent" style="width: 200px;">{{userInfo.sex}}</span>
                <span v-if="userInfo.birth" class="detailsname">出生日期</span>
                <span v-if="userInfo.birth" class="detailscontent" style="width: 200px;">{{userInfo.birth}}</span>
              </div>
              <div class="details-two">
                <span v-if="userInfo.education" class="detailsname">教育背景</span>
                <span v-if="userInfo.education" class="detailscontent">{{userInfo.education}}</span>
              </div>
              <div class="details-san">
                <span v-if="userInfo.resident" class="detailsname">居住地</span>
                <span v-if="userInfo.resident" class="detailscontent">{{userInfo.resident}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 详细内容 -->
      <div class="two">
        <other-home :followers="followers" :likeNum="likeNum" :tag="tag" :uid="otheruid"></other-home>
      </div>
    </div>
  </div>
</template>

<script>
import { finduserinfo } from '../../api/userinfo'
import { findbyuid } from '../../api/user'
import {addHistory_user} from '../../api/history'
import OtherHome from './OtherHome.vue';
export default {
  components: { OtherHome },
  name: "OtherUserPage",
  data: function () {
    return {
      url: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3225163326,3627210682&fm=26&gp=0.jpg",
      // name: "",
      tag: true,
      followers:0,
      likeNum:0,
      user: {},
      userInfo: {},
      otheruid: localStorage.getItem("otherUid"),
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.tag = true
      vm.getdata()
      vm.historyUserAdd()
    });
  },
  created() {
  },
  methods: {
    // 获取个人详情
    getdata(){
      findbyuid({
        uid:this.otheruid
      }).then(res => {
        if (res.code == 200) {
          this.user = res.data.user
          this.userInfo = res.data.userinfo
          this.followers = res.data.followers
          this.likeNum = res.data.likeNum
        } else {
          this.$message.info(res.mess)
        }
        this.url = this.user.image
      })
      setTimeout(() => {
        this.tag = false
      }, 1000);
    },
    historyUserAdd() {
      let data = {
        uid: localStorage.getItem("uid"),
        beuid: localStorage.getItem("otherUid")
      }
      addHistory_user(data).then(res => {
        console.log(res);
      })
    }
  },
};
</script>

<style scoped>
.pa {
  /* height: 800px; */
  width: 70%;
  margin: 0 auto;
  /* border: solid 2px red; */
}
.up-demo {
  /* height: 150px; */
  /* border: solid 2px red; */
  background: #ffffff;
  border-bottom: solid 10px #f6f6f6;
  position: relative;
  display: flex;
  flex-direction: row;
}
#avatar {
  flex: 1;
  padding: 80px 10px 15px 25px;
  /* border: 1px solid red; */
}
#info {
  flex: 6;
  padding: 105px 0px 10px 0px;
  /* border: 1px solid blue; */
}

.info-username {
  /* border: 1px solid red; */
  /* height: 100px; */
  color: black;
  font-size: 30px;
  font-weight: bold;
  /* margin-bottom: 30px; */
}
.user_describe{
  font-size: 15px;
  margin-left: 20px;
}
/* 用户详细信息   *******STSRT****** */
.details {
  padding: 10px 0px 0px 0px;
}
.detailsname {
  display: inline-block;
  width: 100px;
  color: #2f3542;
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
  text-align: left;
}
.detailscontent {
  display: inline-block;
  font-size: 14px;
  color: #747d8c;
}
/* 用户详细信息   ******* END ****** */
.two {
  min-height: 450px;
  /* border: solid 2px red; */
}
</style>

